✨ Created fallback version of app icon#1197
Conversation
There was a problem hiding this comment.
Pull request overview
This PR replaces the static fallback icon with a dynamic fallback that generates application icons based on the name. When an unknown application name is provided, the system now creates an acronym from the name and displays it as text with programmatically selected background shapes.
- Replaced static fallback icon with dynamic name-based fallback
- Added utility functions to generate acronyms and select shape configurations
- Refactored ApplicationIconBase to support both icon-based and text-based rendering
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
src/molecules/ApplicationIcon/Icons/Fallback.tsx |
Deleted the old static fallback icon component |
src/molecules/ApplicationIcon/Fallback.tsx |
Created new fallback component that generates icons based on application name |
src/molecules/ApplicationIcon/ApplicationIconCollection.tsx |
Removed the static fallback icon data export |
src/molecules/ApplicationIcon/ApplicationIconBase.tsx |
Refactored to support both IconData and name-based rendering with Typography |
src/molecules/ApplicationIcon/ApplicationIcon.utils.ts |
Added utility functions for acronym generation and shape selection |
src/molecules/ApplicationIcon/ApplicationIcon.tsx |
Updated Fallback import path to new location |
src/molecules/ApplicationIcon/ApplicationIcon.stories.tsx |
Added Fallback story showcasing multiple random application names |
Comments suppressed due to low confidence (1)
src/molecules/ApplicationIcon/ApplicationIconCollection.tsx:178
- The tests at lines 135-144 and 155-161 import and reference
fallbackfromApplicationIconCollection, but this export has been removed in this PR. These tests will fail becausefallbackis no longer available. The tests need to be updated to reflect the new fallback behavior that generates acronyms from names instead of using a static icon.
export const bravos: IconDataWithColor[] = [
{
name: 'bravos1',
prefix: 'bravos',
height: '24',
width: '24',
color: '#99C6C9',
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 7 changed files in this pull request and generated 6 comments.
Comments suppressed due to low confidence (1)
src/molecules/ApplicationIcon/ApplicationIconCollection.tsx:178
- The
fallbackexport has been removed from ApplicationIconCollection, but it's still being imported in ApplicationIcon.test.tsx (line 9) and used in test assertions (lines 142, 160). This will cause test failures. The tests need to be updated to work with the new name-based fallback approach that no longer uses a static icon.
export const bravos: IconDataWithColor[] = [
{
name: 'bravos1',
prefix: 'bravos',
height: '24',
width: '24',
color: '#99C6C9',
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 7 out of 7 changed files in this pull request and generated 7 comments.
Comments suppressed due to low confidence (1)
src/molecules/ApplicationIcon/ApplicationIconCollection.tsx:179
- Removing the
fallbackexport from ApplicationIconCollection will break existing tests. The ApplicationIcon.test.tsx file (lines 9, 142, 160) imports and usesfallback.svgPathDatato verify fallback rendering behavior.
Since the fallback icon is now dynamically generated based on the application name rather than using a fixed icon, the tests need to be updated to either verify the text-based acronym rendering or use a different approach to test the fallback behavior.
export const bravos: IconDataWithColor[] = [
{
name: 'bravos1',
prefix: 'bravos',
height: '24',
width: '24',
color: '#99C6C9',
svgPathData:
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 25 out of 26 changed files in this pull request and generated 4 comments.
Files not reviewed (1)
- .idea/vcs.xml: Language not supported
Comments suppressed due to low confidence (2)
src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconBase.tsx:113
- The
iconDataprop is now optional (since it can be eithericonDataorname), butApplicationIconBase.tsxdoesn't validate that at least one of these props is provided. If neithericonDatanornameis passed, the component will render an empty container. Consider adding runtime validation or updating the type definition to enforce that one of these props must be provided.
.idea/vcs.xml:12 - The
.idea/vcs.xmlfile is an IDE-specific configuration file that is typically included in.gitignore. This file should not be committed to the repository as it's specific to IntelliJ IDEA/WebStorm and can vary between developers. Consider removing this file from the PR and adding.idea/to your.gitignoreif it's not already there.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 34 out of 35 changed files in this pull request and generated 9 comments.
Files not reviewed (1)
- .idea/vcs.xml: Language not supported
Comments suppressed due to low confidence (2)
src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconBase.tsx:105
- ApplicationIconBaseProps extends Required, which makes size, iconOnly, withHover, and grayScale required. However, the component destructuring provides default values (size = 48, grayScale = false) and the FallbackProps interface extends AppIconProps (not Required), which makes these properties optional. This type mismatch could cause TypeScript errors when passing Fallback props to ApplicationIconBase. Consider making ApplicationIconBaseProps extend AppIconProps instead of Required, since the component already handles defaults.
src/molecules/ApplicationIcon/ApplicationIconBase/ApplicationIconBase.tsx:70 - The hover styles only apply to SVG and div elements, but fallback icons now render a Typography component (p element) instead of an SVG. The hover animation won't apply to the text acronym, creating an inconsistent user experience between custom icons and fallback icons when withHover is true. Consider adding hover styles for the paragraph element or wrapping it in a way that the existing styles apply.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Azure DevOps links
User story
Description
Application icon now creates fallback based on name